<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单点登录系统</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.9.3/qs.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <h1>欢迎访问单点登录系统1</h1>
    <el-row>
        <el-col :span="8">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>

</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    username: '',
                    password: '',
                    returnUrl: ''
                }
            }
        },
        created() {
            this.form.returnUrl = this.getUrlParam("returnUrl");
        },
        methods: {
            login() {
                axios.defaults.withCredentials = true;
                axios({
                    method: 'post',
                    url: 'http://www.cas.com:9000/login',
                    data: Qs.stringify(this.form),
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    // transformResponse: [function (data) {
                    //     return  Qs.stringify(data)
                    // }],
                }).then(res => {
                    if (res.data.code === 200) {
                        var returnUrl = res.data.data.returnUrl;
                        window.location.href = returnUrl
                    }
                }).catch(res => {
                    console.log(res)
                });
            },
            // 从url中获取参数对应的值
            getUrlParam(key) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] === key) {
                        return pair[1];
                    }
                }
                return "";
            },
        },
    })
</script>
</body>
</html>
